/* =============================== */
/* CSS for control sap.m/Carousel  */
/* BlueCrystal theme               */
/* =============================== */

.sapMCrslControls.sapMCrslControlsTop,
.sapMCrslControlsNoArrows.sapMCrslControlsTop {
	background: transparent;
	border-color: transparent;
}

.sapMCrslControls.sapMCrslControlsBottom,
.sapMCrslControlsNoArrows.sapMCrslControlsBottom {
	background: transparent;
	border-color: transparent;
}

.sapMCrslBulleted > span {
	background-color : darken(@sapUiContentForegroundColor, 10);
}

/* Carousel controls: HUD */
.sapMCrslHud a {
	opacity: 0.5;
	box-shadow: @sapUiShadowLevel1;
}

.sapMCrsl .sapMCrslHud a:hover,
.sapMCrsl .sapMCrslHud a:focus {
	box-shadow: @sapUiShadowLevel1;
	border: 1px solid @sapUiButtonBorderColor;
}

.sapMCrsl .sapMCrslHud a:active {
	box-shadow: @sapUiShadowLevel1;
}

.sapMCrsl:focus {
	outline: 1px dotted @sapUiContentFocusColor;
}

.sapMCrslPrev:focus,
.sapMCrslNext:focus,
.sapMCrslPrev .sapUiIcon:focus,
.sapMCrslNext .sapUiIcon:focus {
  outline: none;
}

html.sap-desktop .sapMCrslHud .sapMCrslPrev:focus,
html.sap-desktop .sapMCrslHud .sapMCrslNext:focus {
  	&::before {
		content: "";
		position: absolute;
		top: -0.125rem;
		right: -0.125rem;
		bottom: -0.125rem;
		left: -0.125rem;
		pointer-events: none;
		border: 1px solid @sapUiContentContrastFocusColor;
	}

  	&::after {
		content: "";
		position: absolute;
		top: -0.125rem;
		right: -0.125rem;
		bottom: -0.125rem;
		left: -0.125rem;
		pointer-events: none;
		border: 1px dotted @sapUiContentFocusColor;
	}
}

html[data-sap-ui-browser^='ie'].sap-desktop .sapMCrslPrev:focus .sapUiIcon,
html[data-sap-ui-browser^='ie'].sap-desktop .sapMCrslNext:focus .sapUiIcon,
html[data-sap-ui-browser^='ie'].sap-desktop .sapMCrslPrev .sapUiIcon:focus,
html[data-sap-ui-browser^='ie'].sap-desktop .sapMCrslNext .sapUiIcon:focus {
  	&::before {
		position: absolute;
		padding-top: 0.425rem;
		top: -0.125rem;
		right: -0.125rem;
		bottom: -0.125rem;
		left: -0.125rem;
		border: 1px solid @sapUiContentContrastFocusColor;
	}

  	&::after {
		content: "";
		position: absolute;
		top: -0.125rem;
		right: -0.125rem;
		bottom: -0.125rem;
		left: -0.125rem;
		border: 1px dotted @sapUiContentFocusColor;
	}
}